import React from 'react';
import '../src/style/index.scss';
import Button, { ButtonType, ButtonSize } from './components/Button/button';
import Menu from './components/Menu/menu';
import MenuItem from './components/Menu/menuItem';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <Menu defaultIndex={0} onSelected={(index) => {console.log(index);}}>
          <MenuItem index={0}>link1</MenuItem>
          <MenuItem index={1}>link2</MenuItem>
          <MenuItem index={2}>link3</MenuItem>
          <MenuItem index={3} disabled>link3</MenuItem>
        </Menu>
        <Menu defaultIndex={0} mode="vertical" onSelected={(index) => {console.log(index);}}>
          <MenuItem index={0}>link1</MenuItem>
          <MenuItem index={1}>link2</MenuItem>
          <MenuItem index={2}>link3</MenuItem>
          <MenuItem index={3} disabled>link3</MenuItem>
        </Menu>
        <Button disabled size={ButtonSize.Large}> Hello </Button>
        <Button
          btnType={ButtonType.Primary}
          size={ButtonSize.Small}
        >Hello</Button>
        <Button
          btnType={ButtonType.Link}
          size={ButtonSize.Large}
          href="http://www.baidu.com"
          disabled
        >百度一下，你就知道</Button>
        <Button
          btnType={ButtonType.Link}
          size={ButtonSize.Large}
          href="http://www.baidu.com"
        >百度一下，你就知道</Button>
      </header>
    </div>
  );
}

export default App;
